<template>
    <div class="ranking">
        <div class="header">
            <div class="header-left">
                <img class="header-left-icon" src="@/assets/images/ranking-ic.png" />
                <div class="header-left-title">排行榜</div>
                <img class="header-left-back" src="@/assets/images/ranking-back.png" @click="back" />
            </div>
            <div class="header-ranking">
                <img class="header-ranking-trophy" src="@/assets/images/ranking-trophy.png" />
                <div class="header-ranking-one" v-if="rankingObj.one">
                    <img class="header-ranking-one-bg" src="@/assets/images/ranking-one-bg.png" />
                    <img class="header-ranking-one-wheat" src="@/assets/images/wheat-one.png" />
                    <img class="header-ranking-one-head" src="@/assets/images/profile.jpg" />
                    <img class="header-ranking-one-crown" src="@/assets/images/crown-one.png" />
                    <div class="header-ranking-one-row">
                        <div class="header-ranking-one-row-name">{{ rankingObj.one.xsName }}</div>
                        <img class="header-ranking-one-row-sex" v-if="rankingObj.one.xsSex == '0'" src="@/assets/images/ranking-m.png" />
                        <img class="header-ranking-one-row-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="header-ranking-one-row-class">{{ rankingObj.one.bjName }}</div>
                    </div>

                    <div class="header-ranking-one-info">

                        <img class="header-ranking-one-info-num" src="@/assets/images/ranking-one-num-white.png" />
                        <div class="header-ranking-one-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="header-ranking-one-info-achievements-label">成绩</div>
                            <div class="header-ranking-one-info-achievements-value">{{  rankingObj.one.sjDfsz }}<span style="font-size: 20px;margin-left: 4px;">cm</span></div>
                        </div>
                        <div class="header-ranking-one-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="header-ranking-one-info-achievements-label">评分</div>
                            <div class="header-ranking-one-info-achievements-value">{{  rankingObj.one.sjFs }}<span style="font-size: 18px;margin-left: 4px;">分</span></div>
                        </div>
                    </div>
                </div>
                <div class="header-ranking-two" v-if="rankingObj.two">
                    <img class="header-ranking-two-bg" src="@/assets/images/ranking-two-bg.png" />
                    <img class="header-ranking-two-wheat" src="@/assets/images/wheat-two.png" />
                    <img class="header-ranking-two-head" src="@/assets/images/profile.jpg" />
                    <img class="header-ranking-two-crown" src="@/assets/images/crown-two.png" />
                    <div class="header-ranking-two-row">
                        <div class="header-ranking-two-row-name">{{rankingObj.two.xsName}}</div>
                        <img class="header-ranking-two-row-sex" v-if="rankingObj.two.xsSex == '0'" src="@/assets/images/ranking-m.png" />
                        <img class="header-ranking-two-row-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="header-ranking-two-row-class">{{ rankingObj.two.bjName }}</div>
                    </div>

                    <div class="header-ranking-two-info">
                        <img class="header-ranking-two-info-num" src="@/assets/images/ranking-two-num-white.png" />
                        <div class="header-ranking-two-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="header-ranking-two-info-achievements-label">成绩</div>
                            <div class="header-ranking-two-info-achievements-value">{{  rankingObj.two.sjDfsz }}<span style="font-size: 20px;margin-left: 4px;">{{ unit }}</span></div>
                        </div>
                        <div class="header-ranking-two-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="header-ranking-two-info-achievements-label">评分</div>
                            <div class="header-ranking-two-info-achievements-value">{{  rankingObj.two.sjFs }}<span style="font-size: 18px;margin-left: 4px;">分</span></div>
                        </div>
                    </div>
                </div>
                <div class="header-ranking-three" v-if="rankingObj.three">
                    <img class="header-ranking-three-bg" src="@/assets/images/ranking-three-bg.png" />
                    <img class="header-ranking-three-wheat" src="@/assets/images/wheat-three.png" />
                    <img class="header-ranking-three-head" src="@/assets/images/profile.jpg" />
                    <img class="header-ranking-three-crown" src="@/assets/images/crown-three.png" />
                    <div class="header-ranking-three-row">
                        <div class="header-ranking-three-row-name">{{rankingObj.three.xsName}}</div>
                        <img class="header-ranking-three-row-sex" v-if="rankingObj.three.xsSex == '0'" src="@/assets/images/ranking-m.png" />
                        <img class="header-ranking-three-row-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="header-ranking-three-row-class">{{ rankingObj.three.bjName }}</div>
                    </div>
                    <div class="header-ranking-three-info">
                        <img class="header-ranking-three-info-num" src="@/assets/images/ranking-three-num-white.png" />
                        <div class="header-ranking-three-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="header-ranking-three-info-achievements-label">成绩</div>
                            <div class="header-ranking-three-info-achievements-value">{{  rankingObj.three.sjDfsz }}<span style="font-size: 20px;margin-left: 4px;">{{ unit }}</span></div>
                        </div>
                        <div class="header-ranking-three-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="header-ranking-three-info-achievements-label">评分</div>
                            <div class="header-ranking-three-info-achievements-value">{{  rankingObj.three.sjFs }}<span style="font-size: 18px;margin-left: 4px;">{{ unit }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="grade">
                <div class="grade-item" :style="{color:index ==activeIndex?'#fff':'#a0d4ee',fontSize:index ==activeIndex?'48px':'38px'}" v-for="(item,index) in project" :key="item.value" @click="handleClick(index)">{{ item.label }}</div>
            </div>
            <img class="left-bottom" src="@/assets/images/examination-left-bottom.png" />
            <div class="content">
                <div class="content-header">
                    <div class="content-header-mode">
                        <div class="content-header-mode-item" :class="{ selected: mode==0 }" @click="modeChange(0)">测试模式</div>
                        <div class="content-header-mode-item" :class="{ selected: mode==1 }" @click="modeChange(1)">练习模式</div>

                    </div>
                    <div class="content-header-date">
                        <div>选择时间：</div>
                        <el-date-picker @change="handleDateConfirm" v-model="date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />

                    </div>
                </div>
                <div class="content-body">
                    <div class="content-body-query">
                        <el-select v-model="rankingDate" @change="rankingDateChanage" placeholder="" style="width: 150px; margin-left: 20px;">
                            <el-option label="全部排行" :value="0" />
                            <el-option label="今日" :value="1" />
                            <el-option label="本周" :value="2" />
                            <el-option label="本月" :value="3" />
                        </el-select>

                        <el-select v-model="rankingGrade" @change="getData" placeholder="" style="width: 150px;margin-left: 20px;">
                            <el-option label="全部年级" :value="0" />
                            <el-option v-for="dict in gradeOptions" :key="dict.value" :value="dict.value" :label="dict.label" />
                        </el-select>

                        <el-select v-model="rankingSex" @change="getData" placeholder="" style="width: 150px;margin-left: 20px;">
                            <el-option label="全部性别" :value="3" />
                            <el-option label="男" :value="0" />
                            <el-option label="女" :value="1" />

                        </el-select>

                        
                            <el-select  v-if="mode ==0" clearable v-model="queryParams.tcnameId" @change="getData" placeholder="请选择考试计划" style="width: 300px;margin-left: 20px;">
                                <el-option v-for="dict in tcnameList" :key="dict.id" :value="dict.id" :label="dict.tcname" />
                            </el-select>
                        
                    </div>
                    <div class="content-body-list" v-if="rankingObj.list">
                        <div class="content-body-list-item" v-for="(item,indexRow) in rankingObj.list">
                            <div class="content-body-list-item-row" v-for="(i,index) in item">
                                <div class="content-body-list-item-row-ranking">{{ (index+1)+(indexRow)*10 +3}} </div>
                                <img class="content-body-list-item-row-head" src="@/assets/images/profile.jpg" />
                                <div class="content-body-list-item-row-name">{{ i.xsName }}</div>
                                <img class="content-body-list-item-row-sex" v-if="i.xsSex == '0'" src="@/assets/images/ranking-m.png" />
                                <img class="content-body-list-item-row-sex" v-else src="@/assets/images/ranking-w.png" /> -
                                <div class="content-body-list-item-row-class">{{ i.bjName }}</div>
                                <div class="content-body-list-item-row-value">{{ i.sjZf}} </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script setup name="Ranking">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getTcStudentRank, getAllGrade ,getTcnameList } from "@/api/tc/plan";
import { getDicts } from "@/api/system/dict/data";
import useUserStore from '@/store/modules/user'
import { back } from "@/utils/back";
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const project = ref([{ label: '立定跳远', value: 9 }, { label: '跳绳', value: 6 }, { label: '50米跑', value: 2 }, { label: '800米跑', value: 13 }, { label: '1000米跑', value: 12 },]);
const activeIndex = ref(0);
const grade = ref([]);
const gradeOptions = ref([]);
const rankingDate = ref(0);
const rankingObj = ref({})
const rankingSex = ref(3);//3全部
const rankingGrade = ref(0);//
const date = ref([]);
const mode = ref(0);
const value = ref(0);
const list = ref([]);
const unit = ref("cm");//单位
const tcnameList = ref([])
const queryParams = ref({

    sjTcxmid: project.value[0].value,
    isTc: true,//true测试   false练习
    tcnameId:null,
    params: {}
})

function handleClick(index) {
    activeIndex.value = index;
    queryParams.value.sjTcxmid = project.value[index].value;
    switch (queryParams.value.sjTcxmid) {
        case 9:
            unit.value = "cm"
            break;
        case 6:
            unit.value = "个"
            break;
        case 2:
            unit.value = "秒"
            break;
        case 13:
            unit.value = "秒"
            break;
        case 12:
            unit.value = "秒"
            break;

    }
    getData();
}

onMounted(async () => {
    getGradeOption();
    getData();
})

//全部 今日 本周  本月时间排行选择器
function rankingDateChanage(e) {
    // 获取当前时间
    const now = proxy.dayjs();
    switch (e) {
        case 0:
            queryParams.value.params['beginSjCreate'] = "";
            queryParams.value.params['endSjCreate'] = "";

            break;
        case 1://当天
            // 当天开始
            const startOfDay = now.startOf('day').format('YYYY-MM-DD HH:mm:ss')
            // 当天结束
            const endOfDay = now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
            queryParams.value.params['beginSjCreate'] = startOfDay;
            queryParams.value.params['endSjCreate'] = endOfDay;

            break;
        case 2://本周
            // 本周开始时间（周一 00:00:00）
            const weekStart = now.startOf('week').add(1, 'day').startOf('day');
            // 本周结束时间（周日 23:59:59）
            const weekEnd = now.endOf('week').add(1, 'day').endOf('day');

            const startStr = weekStart.format('YYYY-MM-DD HH:mm:ss')
            const endStr = weekEnd.format('YYYY-MM-DD HH:mm:ss')
            queryParams.value.params['beginSjCreate'] = startStr;
            queryParams.value.params['endSjCreate'] = endStr;


            break;
        case 3://本月
            const startOfMonth = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
            const endOfMonth = dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss");
            queryParams.value.params['beginSjCreate'] = startOfMonth;
            queryParams.value.params['endSjCreate'] = endOfMonth;
            break;

    }
    date.value = [];
    getData();
}
async function getGradeOption() {
    //获取年级字典
    const dict = await getDicts("tc_nj");
    console.log(userStore)
    getAllGrade({ schoolId: userStore.deptId }).then(res => {
        gradeOptions.value = res.data.map(
            i => {
                return {
                    label: dict.data.find(f => parseInt(f.dictValue) == i.gradeId).dictLabel,
                    value: i.gradeId
                }
            }
        );
    })

     const res1 = await getTcnameList({
        pageNum: 1,
        pageSize: 100,
        tcxxid: userStore.deptId

    });
    tcnameList.value = res1.rows;
}

//日期选择器事件
function handleDateConfirm(e) {
    if (e) {
        rankingDate.value = 0;
    } else {
        queryParams.value.params['beginSjCreate'] = "";
        queryParams.value.params['endSjCreate'] = "";
        date = [];
    }

    getData();
}


//考试与练习模式切换
function modeChange(e) {
    //清空时间
    date.value = [];
    queryParams.value.params['beginSjCreate'] = "";
    queryParams.value.params['endSjCreate'] = "";
    mode.value = e;

    getData();
}




/**
 * 获取数据
 */
async function getData() {
    try { 
         proxy.$modal.loading('加载中');
        //时间段
        if (date.value.length) {
            queryParams.value.params['beginSjCreate'] = date.value[0];
            queryParams.value.params['endSjCreate'] = date.value[1];
        } else {

        }
        //性别 3是全部
        if (rankingSex.value == 3) {
            queryParams.value['xsSex'] = null;
        } else {
            queryParams.value['xsSex'] = rankingSex.value;
        }
        //年级
        if (rankingGrade.value == 0) {
            queryParams.value['xsNj'] = null
        } else {
            queryParams.value['xsNj'] = rankingGrade.value;
        }
        queryParams.value.isTc = mode.value == 0 ? true : false;
        //获取排行
        const res = await getTcStudentRank(queryParams.value);
        if (res.data) {
            rankingObj.value['one'] = res.data?.[0];
            rankingObj.value['two'] = res.data?.[1];
            rankingObj.value['three'] = res.data?.[2];
            rankingObj.value['list'] = []; 
            res.data.forEach(element => {
                if (queryParams.value.sjTcxmid == 2 || queryParams.value.sjTcxmid == 13 || queryParams.value.sjTcxmid == 14) {
                    item.sjDfsz = (item.sjDfsz / 1000).toFixed(2);
                }
            });
            if (res.data.length > 2) {
                const others = res.data.slice(3); // 从第4个开始 
                for (let i = 0; i < others.length; i += 10) {
                    rankingObj.value.list.push(others.slice(i, i + 10));
                }
            }

            console.log("🚀 ~ getData ~ rankingObj.value:", rankingObj.value)
        } else {
            reset();
        }

    } catch (err) {
        console.error(err)
    } finally {
          proxy.$modal.closeLoading();
    }
}

function reset() {
    rankingObj.value['one'] = null;
    rankingObj.value['two'] = null;
    rankingObj.value['three'] = null;
    rankingObj.value['list'] = [];
}



</script>
<style scoped lang="scss">
.ranking {
    width: 100%;
    height: 100%;
    background: url("@/assets/images/examination-bg.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.box {
    display: flex;
}
:deep(.el-date-editor) {
    background: transparent;

    .el-range-input {
        color: #009dff;
    }
}

:deep(.el-select__wrapper) {
    background: #0275e2;
    border-radius: 30px;
    border: none;
    box-shadow: none;

    .el-select__input {
        color: #fff !important;
    }

    .el-select__placeholder {
        color: #fff !important;
    }
}

.header {
    position: relative;
    display: flex;
    width: 100%;
    // height: 178px;
    justify-content: space-between;
    // align-items: center;
    padding: 0 50px;
    &-left {
        margin-top: 60px;
        display: flex;
        // align-items: center;
        &-icon {
            width: 65px;
            height: 65px;
            position: relative;
            top: -10px;
        }
        &-title {
            margin-left: 14px;
            font-family: YouSheBiaoTiHei;
            font-size: 60px;
            line-height: 58px;
            letter-spacing: 0.04em;
            font-variation-settings: "opsz" auto;
            background: linear-gradient(0deg, #ffa536 0%, #ffffff 66%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &-back {
            margin-top: 10px;
            cursor: pointer;
            margin-left: 27px;
            width: 40px;
            height: 40px;
            &:hover {
                opacity: 0.8;
            }
        }
    }
    &-ranking {
        display: flex;
        position: relative;
        width: 1500px;
        margin-top: 40px;

        &-trophy {
            position: relative;
            top: 65px;
            width: 302px;
            height: 302px;
        }

        &-one {
            position: absolute;
            width: 328px;
            height: 378px;
            // background: #ff650a;
            top: 0px;

            left: 748px;

            &-bg {
                position: absolute;
                left: 0px;
                top: 116px;
                width: 328px;
                height: 218px;
            }
            &-row {
                display: flex;
                position: absolute;
                top: 182px;
                align-items: center;
                &-sex {
                    margin: 0 10px;
                    width: 20px;
                    height: 20px;
                }

                &-name {
                    margin-left: 20px;
                    font-size: 30px;
                    color: #fff;
                }
                &-class {
                    margin-left: 20px;
                    width: 140px;
                    overflow: hidden;
                    font-size: 22px;
                    color: #fff;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            &-info {
                position: absolute;
                top: 240px;
                width: 100%;
                // height: 80px;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                &-num {
                    margin-left: 38px;
                    margin-top: 10px;
                    width: 48px;
                    height: 70px;
                }

                &-achievements {
                    position: absolute;
                    left: 110px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 10px;
                width: 93px;
                height: 59px;
                left: 80px;
                transform: rotate(-29.72deg);
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 50px;
                width: 205px;
                height: 124px;
                left: 58px;
            }
            &-head {
                position: absolute;
                top: 42px;
                left: 107px;
                width: 106px;
                height: 106px;
                border-radius: 50%;
                border: 2px solid #fff;
                // padding: 2px;
            }
        }
        &-two {
            position: absolute;
            width: 328px;
            height: 378px;
            top: 0px;
            left: 370px;
            &-bg {
                position: absolute;
                left: 0px;
                top: 116px;
                width: 328px;
                height: 218px;
            }
            &-row {
                display: flex;
                position: absolute;
                top: 182px;
                align-items: center;
                &-sex {
                    margin: 0 10px;
                    width: 20px;
                    height: 20px;
                }

                &-name {
                    margin-left: 20px;
                    font-size: 30px;
                    color: #fff;
                }
                &-class {
                    margin-left: 20px;
                    width: 140px;
                    overflow: hidden;
                    font-size: 22px;
                    color: #fff;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            &-info {
                position: absolute;
                top: 240px;
                width: 100%;
                // height: 80px;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                &-num {
                    margin-left: 38px;
                    margin-top: 10px;
                    width: 48px;
                    height: 70px;
                }

                &-achievements {
                    position: absolute;
                    left: 110px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 10px;
                width: 93px;
                height: 59px;
                left: 80px;
                transform: rotate(-29.72deg);
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 50px;
                width: 205px;
                height: 124px;
                left: 58px;
            }
            &-head {
                position: absolute;
                top: 42px;
                left: 107px;
                width: 106px;
                height: 106px;
                border-radius: 50%;
                border: 2px solid #fff;
                // padding: 2px;
            }
        }
        &-three {
            position: absolute;
            width: 328px;
            height: 378px;

            top: 0px;
            left: 1126px;
            &-bg {
                position: absolute;
                left: 0px;
                top: 116px;
                width: 328px;
                height: 218px;
            }
            &-row {
                display: flex;
                position: absolute;
                top: 182px;
                align-items: center;
                &-sex {
                    margin: 0 10px;
                    width: 20px;
                    height: 20px;
                }

                &-name {
                    margin-left: 20px;
                    font-size: 30px;
                    color: #fff;
                }
                &-class {
                    margin-left: 20px;
                    width: 140px;
                    overflow: hidden;
                    font-size: 22px;
                    color: #fff;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            &-info {
                position: absolute;
                top: 240px;
                width: 100%;
                // height: 80px;
                overflow: hidden;
                display: flex;
                flex-direction: column;

                &-num {
                    margin-left: 38px;
                    margin-top: 10px;
                    width: 48px;
                    height: 70px;
                }

                &-achievements {
                    position: absolute;
                    left: 110px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 10px;
                width: 93px;
                height: 59px;
                left: 80px;
                transform: rotate(-29.72deg);
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 50px;
                width: 205px;
                height: 124px;
                left: 58px;
            }
            &-head {
                position: absolute;
                top: 42px;
                left: 107px;
                width: 106px;
                height: 106px;
                border-radius: 50%;
                border: 2px solid #fff;
                // padding: 2px;
            }
        }
    }
}
.left-bottom {
    position: absolute;
    left: 38px;
    bottom: 40px;
    width: 235px;
    height: 262px;
}
.content {
    position: relative;
    margin-top: 30px;
    width: 1596px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;

    z-index: 11;

    &-body {
        margin-top: 4px;
        width: 1596px;
        height: 614px;
        border-radius: 4px;
        background: #009dff;
        overflow: hidden;
        &-list {
            display: flex;
            width: 100%;
            overflow-y: auto;
            &-item {
                margin-right: 13px;
                display: flex;
                flex-direction: column;
                align-items: center;
                &-row {
                    display: flex;

                    width: 410px;
                    height: 56px;
                    border-radius: 4px;
                    // background: rgba(255, 207, 153, 0.4);
                    display: flex;
                    align-items: center;
                    overflow: hidden;

                    &-ranking {
                        padding: 0 10px;
                        width: 58px;
                        font-size: 20px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        img {
                            width: 40px;
                            height: 28px;
                        }
                    }
                    &-head {
                        width: 34px;
                        height: 34px;
                        border-radius: 50%;
                    }
                    &-name {
                        width: 72px;
                        overflow: hidden;
                        margin-left: 10px;
                        font-size: 20px;
                        color: #fff;
                    }
                    &-sex {
                        margin: 0 10px;
                        width: 20px;
                        height: 20px;
                    }
                    &-class {
                        width: 100px;
                        font-size: 20px;
                        color: #fff;
                    }
                    &-value {
                        width: 80px;
                        margin-left: 18px;
                        font-size: 22px;
                        color: #fff;
                    }
                }
            }
        }

        &-query {
            margin-top: 10px;
            display: flex;
        }
    }

    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 60px;
        border-radius: 4px;
        background: linear-gradient(
            90deg,
            #fbe77a 0%,
            #fffdf0 25%,
            #ffffff 100%
        );

        &-mode {
            display: flex;
            width: 300px;
            justify-content: space-between;
            color: #009dff;
            padding-left: 30px;
            &-item {
                cursor: pointer;
                font-size: 30px;
                opacity: 0.4;
                &.selected {
                    opacity: 1;

                    //    transform: scale(1.3);
                }
            }
        }
        &-date {
            position: relative;
            display: flex;
            align-items: center;
            div {
                font-size: 24px;
                color: #009dff;
            }
        }
    }
}
.grade {
    width: 300px;
    padding-left: 30px;

    &-item {
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: DingTalk JinBuTi;
        font-size: 38px;
        font-weight: normal;
        line-height: 58px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #a0d4ee;
        cursor: pointer;
    }
}
</style>

